<!--
 * @Description  : 
 * @Version      : 1.0
 * @Author       : Shiming
 * @Date         : 2022-01-25 20:18:52
 * @LastEditors  : Shiming
 * @LastEditTime : 2022-02-25 14:04:01
 * @FilePath     : \\tms-obc-web\\src\\app\\shared\\components\\insurance-table\\insurance-table.component.html
 * Copyright (C) 2022 huzhenhong. All rights reserved.
-->
<div nz-row>
    <div nz-col nzSpan="24">
        <div class="mb-md ml-xl" style="text-align: right;">
            <button nz-button nzType="primary" (click)="add()">新增公里数</button>
            <button class="ml-md" nz-button nzType="primary" (click)="save()">保存</button>
        </div>
        <div>
            <sf #sf [schema]="schema" [formData]="sfdata" [button]="'none'" [ui]="ui">
                <ng-template sf-template="freightPrice" let-i let-ui="ui">
                    <nz-input-group [nzAddOnAfter]="addOnAfterTemplate">
                        <nz-input-number [(ngModel)]="minInsurancePrice"  [nzMin]="0" ></nz-input-number>
                      </nz-input-group>
                      <ng-template #addOnAfterTemplate>
                          <span >元</span>
                      </ng-template>
                </ng-template>
              </sf>
           
        </div>
        <nz-table #groupingTable [nzData]="data" nzBordered nzSize="small" [nzFrontPagination]="false"
            [nzScroll]="{ x: '900px' }" [nzShowPagination]="false" class="ml-xl" style="max-width: 1200px;">
            <thead>
                <tr>
                    <th rowspan="2" nzWidth="250px" nzAlign="center" nzLeft>险种</th>
                    <th nzWidth="220px" nzAlign="center" >普货-基本险</th>
                    <th nzWidth="220px" nzAlign="center" >普货-综合险</th>
                    <th rowspan="2" nzWidth="60px" nzAlign="center" nzRight>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of groupingTable.data;let i = index">
                    <td nzWidth="250px" nzAlign="center" nzLeft>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <div  >
                                公里数（km）
                            </div>
                            <div style="color:#f0f0f0;">|</div>
                            <div >
                                    <label style="width: 65px;text-align: right;"> {{item.startKm}}</label>
                                    <label>-</label>
                                 
                                    <nz-input-number [ngModel]="item.endKm" (ngModelChange)="changeEndKm($event,i)" [nzMin]="0"
                                        [nzFormatter]="formatterDollar" nzSize="small">
                                    </nz-input-number>（含）
                               
                            </div>
                        </div>
                  
                    </td>
                    <td nzWidth="220px" nzAlign="center" >
                        <div style="    margin-left: 26%">
                            <nz-input-group [nzAddOnAfter]="addOnAfterTemplate2">
                            <nz-input-number [(ngModel)]="item.baseInsuranceRate" [nzMin]="0" nzSize="small" 
                               >
                            </nz-input-number>
                        </nz-input-group>
                        <ng-template #addOnAfterTemplate2>
                            <span >%</span>
                        </ng-template>
                        </div>
                    </td>
                    <td nzWidth="220px" nzAlign="center" >
                        <div style="    margin-left: 26%">
                            <nz-input-group [nzAddOnAfter]="addOnAfterTemplate2">
                            <nz-input-number [(ngModel)]="item.blanketInsuranceRate" [nzMin]="0" nzSize="small" >
                            </nz-input-number>
                        </nz-input-group>
                        </div>
                    </td>
                    <td nzWidth="60px" nzAlign="center" nzRight>
                        <a *ngIf="i === groupingTable.data.length-1 && groupingTable.data.length>1"
                             nz-popconfirm
                            nzPopconfirmTitle="是否确认删除?" (nzOnConfirm)="deleteRow(i)"
                            >删除</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>


    </div>
</div>